<template>
	<div class="contain">
		<div class="contain-header">
			<el-form  label-width="50px" inline >
				<el-form-item label="学号:">
					<el-input  placeholder="请输入学号" v-model="pageForm.number"></el-input>
				</el-form-item>
				<el-form-item label="姓名:">
					<el-input  placeholder="请输入姓名" v-model="pageForm.userName"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="small" @click="getList">搜 索</el-button>
					<el-button  size="small" @click="resetList">重 置</el-button>
					<el-button type="primary" size="small" @click="addDialog = true">新 建</el-button>
					<el-button type="primary" size="small" @click="downloadFile" style="margin-right: 10px" >模板下载</el-button>
					<el-upload
							class="upload-demo"
							:action=uploadUrl
							:headers=myHeaders
							ref="upload"
							:on-success="leadingIn"
							:limit="1"
							:data="uploadData"
							:show-file-list="false"
					>
						<el-button type="primary" size="small">批量导入</el-button>
					</el-upload>
				</el-form-item>
			</el-form>
		</div>
		<div class="contain-table">
			<div class="tab-line">
				<div class="tab-show">账号</div>
				<div class="tab-show">姓名</div>
				<div class="tab-show">学号</div>
				<div class="tab-show">考核成绩</div>
				<div class="tab-show">提交时间</div>
				<div class="tab-set">操作</div>
			</div>
			<div class="tab-body" v-for="item in list" :key="item.id">
				<div class="tab-show">{{item.loginName}}</div>
				<div class="tab-show">{{item.userName}}</div>
				<div class="tab-show">{{item.number}}</div>
				<div class="tab-show">
					<el-button type="danger" text size="default" @click="openSee(item.userPoint)">查看详情</el-button>
				</div>
				<div class="tab-show">{{item.createTime}}</div>
				<div class="tab-set">
					<el-button type="primary" text size="default" @click="openEdit(item)">编辑</el-button>
					<el-button type="primary" text size="default" @click="del(item.id)">删除</el-button>
					<el-button type="primary" text size="default" @click="res(item.id)">重置密码</el-button>
				</div>
			</div>
		</div>
		<div class="contain-footer">
			<el-pagination
					background
					layout="prev, pager, next"
					:total="total"
					class="mt-4"
					:page-size="5"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
			/>
		</div>
	</div>
	<el-dialog
			v-model="addDialog"
			title="新建"
			width="30%"
	>
		<el-form label-width="80px">
			<el-form-item label="账号:">
				<el-input v-model="addForm.loginName" placeholder="请输入账号" style="width: 300px" />
			</el-form-item>
			<el-form-item label="学号:">
				<el-input v-model="addForm.number" placeholder="请输入学号" style="width: 300px" />
			</el-form-item>
			<el-form-item label="姓名:">
				<el-input v-model="addForm.userName" placeholder="请输入姓名" style="width: 300px" />
			</el-form-item>
		</el-form>
		<template #footer>
		  <span class="dialog-footer">
			<el-button @click="addDialog = false">取 消</el-button>
			<el-button type="primary" @click="submitAdd">确 定</el-button>
		  </span>
		</template>
	</el-dialog>
	<el-dialog
			v-model="editDialog"
			title="编辑"
			width="30%"
	>
		<el-form label-width="80px">
			<el-form-item label="账号:">
				<el-input v-model="editForm.loginName" placeholder="请输入账号" style="width: 300px" />
			</el-form-item>
			<el-form-item label="学号:">
				<el-input v-model="editForm.number" placeholder="请输入学号" style="width: 300px" />
			</el-form-item>
			<el-form-item label="姓名:">
				<el-input v-model="editForm.userName" placeholder="请输入姓名" style="width: 300px" />
			</el-form-item>
		</el-form>
		<template #footer>
		  <span class="dialog-footer">
			<el-button @click="editDialog = false">取 消</el-button>
			<el-button type="primary" @click="submitEdit">确 定</el-button>
		  </span>
		</template>
	</el-dialog>
	<el-dialog
			v-model="seeDialog"
			title="考核详情"
			width="30%"
	>
		<div style="width: 100%;margin: 0 auto;border: 1px solid #ccc;border-radius: 10px;">
			<div style="display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #ccc;height: 30px">
				<div style="width: 50%;height: 100%;line-height: 30px; text-align: center;border-right: 1px solid #ccc">模块名称</div>
				<div style="width: 50%;height: 100%;line-height: 30px;text-align: center">实训成绩</div>
			</div>
			<div style="display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #ccc;height: 30px">
				<div style="width: 50%;height: 100%;line-height: 30px;text-align: center;border-right: 1px solid #ccc">牛解剖虚拟仿真实训软件</div>
				<div style="width: 50%;height: 100%;line-height: 30px;text-align: center">{{seeForm.cattlePoint === 0 ? '未完成' : seeForm.cattlePoint}}</div>
			</div>
			<div style="display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #ccc;height: 30px">
				<div style="width: 50%;height: 100%;line-height: 30px;text-align: center;border-right: 1px solid #ccc">鸡解剖虚拟仿真实训软件</div>
				<div style="width: 50%;height: 100%;line-height: 30px;text-align: center">{{seeForm.chickenPoint === 0 ? '未完成' : seeForm.chickenPoint}}</div>
			</div>
			<div style="display: flex;justify-content: space-between;align-items: center;height: 30px">
				<div style="width: 50%;height: 100%;line-height: 30px;text-align: center;border-right: 1px solid #ccc;">猪解剖虚拟仿真实训软件</div>
				<div style="width: 50%;height: 100%;line-height: 30px;text-align: center">{{seeForm.pigPoint=== 0 ? '未完成' : seeForm.pigPoint}}</div>
			</div>
		</div>
		<template #footer>
		  <span class="dialog-footer">
			<el-button type="primary" @click="seeDialog = false">关 闭</el-button>
		  </span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
    import {ref,reactive,onMounted} from 'vue'
    import {clsStu, addStu} from "../api/classMoudles";
    import {useRoute } from "vue-router";
    import {ElMessageBox, ElNotification} from "element-plus";
    import {delUser, retPas} from "../api/loginMoudles";
    import common from "../utils/common";
    import request from "../utils/request";
    import { editUser } from "../api/loginMoudles";
    const route = useRoute()
	const  uploadUrl =  common.requestUrl + '/class/upload'
	const myHeaders = ref( {
        animalToken:  sessionStorage.getItem('token')
    })
	const uploadData = {
            classId: route.query.id
	}
	const leadingIn = (res) => {
        if (res.statusCode !== 200) {
            ElNotification({
                title: '提 示',
                message: res.message,
                type: 'error',
            })
        } else {
            ElNotification({
                title: '提 示',
                message: res.message,
                type: 'success',
            })
            getList()
        }
	}
    const pageForm = reactive({
        classId:null,
        number: "",
        pageIndex: 1,
        pageSize: 5,
        userName: "",
    })
    const resetList = () => {
        pageForm.number = ""
        pageForm.userName = ""
        getList()
    }
    let list = ref([])
    let total = ref(0)
    const getList = async () => {
        const { data } = await clsStu(pageForm)
        if (data.statusCode === 200){
            list.value = data.data.data
            total.value = data.data.total
        }
    }
    onMounted(() => {
       pageForm.classId = route.query.id
        getList()
    })
    //分页
    const handleSizeChange = (val: number) => {
        pageForm.pageSize = val
        getList()
    }
    const handleCurrentChange = (val: number) => {
        pageForm.pageIndex = val
        getList()
    }
    //新增
    let addDialog = ref<boolean>(false)
    let addForm = reactive({
        classId: route.query.id,
        loginName: "",
        number: "",
        userName: ""
    })
    const submitAdd = async () => {
            const { data } = await addStu(addForm)
            if (data.statusCode === 200){
                ElNotification({
                    title: '提 示',
                    message: data.message,
                    type: 'success',
                })
                addDialog.value = false
                addForm.name = ''
                await getList()
            }
    }
  
    //编辑
    let editDialog = ref<boolean>(false)
    let editForm = ref({})
    const openEdit = (item) => {
        editForm.value.classId = route.query.id
        editForm.value.loginName = item.loginName
        editForm.value.number = item.number
        editForm.value.userName = item.userName
        editForm.value.schoolId = item.schoolId
        editForm.value.id = item.id
        editDialog.value = true
    }
    const submitEdit = async () => {
        const { data } = await editUser(editForm.value)
        if (data.statusCode === 200){
            ElNotification({
                title: '提 示',
                message: data.message,
                type: 'success',
            })
            editDialog.value = false
            editForm.value = {}
            await getList()
        }
    }
    //重置密码
    const res = (id) => {
        ElMessageBox.confirm(
            '确定重置此密码?',
            '提 示',
            {confirmButtonText: '确 定',cancelButtonText: '取 消',  type: 'warning',}
        )
            .then(() => {
                retPas(id).then(res => {
                    if (res.data.statusCode === 200){
                        ElNotification({
                            title: '提 示',
                            message: res.data.message,
                            type: 'success',
                        })
                        getList()
                    }
                })
            })
            .catch(() => {
            })
    }
    //删除用户
    const del = (id) => {
        ElMessageBox.confirm(
            '确定删除此学生?',
            '提 示',
            {confirmButtonText: '确 定',cancelButtonText: '取 消',  type: 'warning',}
        )
            .then(() => {
                delUser(id).then(res => {
                    if (res.data.statusCode === 200){
                        ElNotification({
                            title: '提 示',
                            message: res.data.message,
                            type: 'success',
                        })
                        getList()
                    }
                })
            })
            .catch(() => {
            })
    }
	const downloadFile = () => {
        request({
            url: common.requestUrl + "/class/downloadTemplate",
            method: 'get',
            responseType: 'blob',
        }).then(resp => {
            const blob = new Blob([resp.data], {type: "application/vnd.ms-excel"});
            const url = window.URL.createObjectURL(blob);
            let a = document.createElement('a');
            a.download = '学生模板.xls';
            a.href = url;
            a.click();
        })  //导出文件请求
	}

    let seeDialog = ref<boolean>(false)
    let seeForm = ref({})
	const openSee = (item) => {
		if (!item){
            ElNotification({
                title: '提 示',
                message: "考核暂未完成",
                type: 'warning',
            })
		}else {
            seeForm = item
            console.log(seeForm)
            seeDialog.value = true
		}
	}
</script>

<style scoped lang="less">
	.contain{
		position: relative;
		width: 100%;
		height: 100%;
		.contain-header{
			margin-bottom: 20px;
			display: flex;
			justify-content: flex-end;
		}
		.contain-table{
			margin: 0 auto 20px;
			width: 90%;
			.tab-line{
				width: 100%;
				display: flex;
				margin-bottom: 20px;
				align-items: center;
				padding: 0 20px;
				box-sizing: border-box;
				justify-content: space-between;
				.tab-show{
					width: 15%;
					text-align: center;
					font-size: 18px;
					color: #666;
				}
				.tab-set{
					width: 25%;
					text-align: center;
					font-size: 18px;
					color: #666;
				}
			}
			.tab-body{
				width: 100%;
				display: flex;
				margin-bottom: 10px;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				padding: 20px;
				border-radius: 20px;
				box-sizing: border-box;
				.tab-show{
					width: 15%;
					text-align: center;
					font-size: 16px;
					color: #333;
				}
				.tab-set{
					width: 25%;
					text-align: center;
				}
			}
		}
		.contain-footer{
			position: absolute;
			bottom: 5%;
			left: -50%;
			transform: translateX(50%);
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
